<template>
	<view class="container">
		<block v-if="isload">
			<block v-if="cartlist.length>0">
				<view class="cartmain">
					<block v-for="(item, index) in cartlist" :key="item.id">
						<view class="item">
							<view class="content flex-y-center">
								<view @tap.stop="changeradio" :data-index="index" class="radio"
									:style="item.checked ? 'background:'+t('color1')+';border:0' : ''">
									<image class="radio-img" src="/static/img/checkd.png" />
								</view>
								<image :src="item.product.pic" class="img" @tap="gotoFun"
									:data-url="'/pages/shop/product?id=' + item.product.id" />
								<view class="detail">
									<view class="title"><text>{{item.product.name}}</text></view>
									<view class="desc"><text>价值：￥{{item.product.sell_price}}</text></view>
									<view class="buynum flex flex-y-center">
										<view class="price flex1" :style="{color:t('color1')}"><text
												v-if="item.product.money_price>0">￥{{item.product.money_price}}+</text>{{item.product.score_price}}{{t('积分')}}
										</view>
										<view class="f2 flex flex-y-center">
											<view class="minus flex-x-center" @tap="gwcminus" :data-index="index"
												:data-cartid="item.id" :data-num="item.num">-</view>
											<input class="flex-x-center" type="number" :value="item.num"
												@blur="gwcinput" :data-max="item.product.stock" :data-index="index"
												:data-cartid="item.id" :data-num="item.num"></input>
											<view class="plus flex-x-center" @tap="gwcplus" :data-index="index"
												:data-max="item.product.stock" :data-num="item.num"
												:data-cartid="item.id">+</view>
										</view>
									</view>
								</view>
								<view class="prodel" @tap="cartdelete" :data-cartid="item.id">
									<image src="/static/img/del.png" />
								</view>
							</view>
						</view>
					</block>
				</view>

				<view style="height:auto;position:relative">
					<view style="width:100%;height:110rpx"></view>
					<view class="footer flex" :class="menuindex>-1?'tabbarbot':'notabbarbot'">
						<view class="text1">合计：</view>
						<view class="text2" :style="{color:t('color1')}"><text
								v-if="totalmoney>0">￥{{totalmoney}}+</text><text>{{totalscore}}{{t('积分')}}</text></view>
						<view class="flex1"></view>
						<view class="op" @tap="toOrder"
							:style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}">
							去结算</view>
					</view>
				</view>

			</block>
			<block v-else>
				<view class="data-empty">
					<image :src="pre_url+'/static/img/cartnull.png'" class="data-empty-img"
						style="width:120rpx;height:120rpx" />
					<view class="data-empty-text" style="margin-top:20rpx;font-size:24rpx">购物车空空如也~</view>
					<button
						style="width:400rpx;border:1px solid #ff6801;border-radius:6rpx;background:#ff6801;margin-top:20px;color:#fff"
						@tap="goto" data-url="index">去选购</button>
				</view>
			</block>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				initdata: {},
				pre_url: app.globalData.pre_url,

				cartlist: [],
				totalscore: 0,
				totalmoney: '0.00',
				selectedcount: 0,
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
		},
		onShow: function() {
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiScoreshop/cart', {}, function(res) {
					console.log(res, '123465');
					that.loading = false;
					that.cartlist = res.cartlist;
					var cartlist = res.cartlist;
					for (var i in cartlist) {
						cartlist[i].checked = true;
					}
					that.calculate();
					that.loaded();
				});
			},
			changeradio: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var cartlist = that.cartlist;
				var checked = cartlist[index].checked;
				if (checked) {
					cartlist[index].checked = false;
				} else {
					cartlist[index].checked = true;
				}
				that.cartlist = cartlist;
				that.calculate();
			},
			calculate: function() {
				var that = this;
				var cartlist = that.cartlist;
				var totalmoney = 0.00;
				var totalscore = 0.00;
				var selectedcount = 0;
				for (var i in cartlist) {
					if (cartlist[i].checked) {
						var thiscart = cartlist[i];
						totalmoney += thiscart.product.money_price * thiscart.num;
						totalscore += thiscart.product.score_price * thiscart.num;
						selectedcount += thiscart.num;
					}
				}
				that.totalmoney = totalmoney.toFixed(2);
				that.totalscore = totalscore;
				that.selectedcount = selectedcount;
			},
			checkpro: function(e) {
				var that = this;
				var ids = e.detail.value;
				that.ids = ids;
				that.calculate();
			},
			cartdelete: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.cartid;
				app.confirm('确定要从购物车移除吗?', function() {
					app.post('ApiScoreshop/cartdelete', {
						id: id
					}, function(data) {
						app.success('操作成功');
						setTimeout(function() {
							that.getdata();
						}, 1000);
					});
				});
			},
			toOrder: function() {
				var that = this;
				var cartlist = that.cartlist;
				var prodata = [];
				for (var i in cartlist) {
					if (cartlist[i].checked) {
						prodata.push(cartlist[i].proid + ',' + cartlist[i].num);
					}
				}
				if (prodata.length == 0) {
					app.error('请先选择产品');
					return;
				}
				app.goto('buy?prodata=' + prodata.join('-'));
			},
			//加
			gwcplus: function(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				var maxnum = parseInt(e.currentTarget.dataset.max);
				var cartid = e.currentTarget.dataset.cartid;
				var num = parseInt(e.currentTarget.dataset.num);
				if (num >= maxnum) {
					app.error('库存不足');
					return;
				}
				var cartlist = this.cartlist;
				cartlist[index].num++;
				this.cartlist = cartlist
				this.calculate();
				var that = this;
				app.post('ApiScoreshop/cartChangenum', {
					id: cartid,
					num: num + 1
				}, function(data) {
					if (data.status == 1) {
						//that.getdata();
					} else {
						app.error(data.msg);
					}
				});
			},
			//减
			gwcminus: function(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				var maxnum = parseInt(e.currentTarget.dataset.max);
				var cartid = e.currentTarget.dataset.cartid;
				var num = parseInt(e.currentTarget.dataset.num);
				if (num == 1) return;
				var cartlist = this.cartlist;
				cartlist[index].num--;
				this.cartlist = cartlist
				this.calculate();
				var that = this;
				app.post('ApiScoreshop/cartChangenum', {
					id: cartid,
					num: num - 1
				}, function(data) {
					if (data.status == 1) {
						//that.getdata();
					} else {
						app.error(data.msg);
					}
				});
			},
			//输入
			gwcinput: function(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				var maxnum = parseInt(e.currentTarget.dataset.max);
				var cartid = e.currentTarget.dataset.cartid;
				var num = e.currentTarget.dataset.num;
				var newnum = parseInt(e.detail.value);
				console.log(num + '--' + newnum);
				if (num == newnum) return;

				if (newnum > maxnum) {
					app.error('库存不足');
					return;
				}
				var cartlist = this.cartlist;
				cartlist[index].num = newnum;
				this.cartlist = cartlist
				this.calculate();

				var that = this;
				app.post('ApiScoreshop/cartChangenum', {
					id: cartid,
					num: newnum
				}, function(data) {
					if (data.status == 1) {
						//that.getdata();
					} else {
						app.error(data.msg);
					}
				});
			},
			addcart: function() {
				this.getdata();
			}
		}
	};
</script>
<style>
	.cartmain .item {
		width: 94%;
		margin: 20rpx 3%;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 3%;
	}

	.cartmain .item .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 30rpx
	}

	.cartmain .item .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.cartmain .item .content {
		width: 100%;
		margin: 0;
		position: relative;
	}

	.cartmain .item .content .check {
		width: 70rpx;
		margin-top: 30rpx;
	}

	.cartmain .item .content .img {
		width: 140rpx;
		height: 140rpx;
	}

	.cartmain .item .content .detail {
		flex: 1;
		margin-left: 16rpx
	}

	.cartmain .item .content .detail .title {
		padding-right: 40rpx;
		color: #222222;
		font-weight: bold;
		font-size: 26rpx;
		line-height: 34rpx;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 68rpx
	}

	.cartmain .item .content .detail .desc {
		height: 46rpx;
		line-height: 46rpx;
		color: #666;
		overflow: hidden;
		font-size: 24rpx;
	}

	.cartmain .item .content .prodel {
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: 0;
		right: 0
	}

	.cartmain .item .content .prodel image {
		width: 100%;
		height: 100%
	}

	.cartmain .item .buynum .price {
		height: 46rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold
	}

	.cartmain .item .buynum .f2 {
		border: 1px solid #f1f1f1
	}

	.cartmain .item .buynum .f2 input {
		flex: 1;
		width: 70rpx;
		border-left: 1px solid #f1f1f1;
		border-right: 1px solid #f1f1f1;
		text-align: center;
		color: #333;
		font-size: 26rpx
	}

	.cartmain .item .buynum .f2 .plus {
		width: 50rpx;
	}

	.cartmain .item .buynum .f2 .minus {
		width: 50rpx;
	}

	.cartmain .item .bottom {
		width: 94%;
		margin: 0 3%;
		border-top: 1px #e5e5e5 solid;
		padding: 10rpx 0px;
		overflow: hidden;
		color: #ccc;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.cartmain .item .bottom .f1 {
		display: flex;
		align-items: center;
		color: #333
	}

	.cartmain .item .bottom .f1 image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 4px;
		margin-right: 4px
	}

	.cartmain .item .bottom .op {
		border: 1px #ff4246 solid;
		border-radius: 10rpx;
		color: #ff4246;
		padding: 0 10rpx;
		height: 46rpx;
		line-height: 46rpx;
		margin-left: 10rpx;
	}

	.footer {
		width: 100%;
		background: #fff;
		margin-top: 5px;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 8;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-top: 1px solid #EFEFEF
	}

	.footer .text0 {
		color: #666666;
		font-size: 24rpx;
	}

	.footer .text1 {
		height: 110rpx;
		line-height: 110rpx;
		color: #444;
		font-weight: bold;
		font-size: 24rpx;
		margin-right: 10rpx
	}

	.footer .text2 {
		color: #F64D00;
		font-size: 30rpx;
		font-weight: bold
	}

	.footer .op {
		width: 216rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 6rpx;
		font-weight: bold;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		margin-left: 30rpx
	}

	.data-empty {
		width: 100%;
		text-align: center;
		padding-top: 100rpx;
		padding-bottom: 100rpx
	}

	.data-empty-img {
		width: 300rpx;
		height: 300rpx;
		display: inline-block;
	}

	.data-empty-text {
		display: block;
		text-align: center;
		color: #999999;
		font-size: 32rpx;
		width: 100%;
		margin-top: 30rpx;
	}
</style>